import React, { useState } from 'react'
import { Button, Input } from 'antd-mobile';
//导入验证手机号接口
import { docheckphone, dosendmsgcode } from '@/api/regist';
import { Toast, Modal } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
type Props = {}

export default function Step1({ }: Props) {
    const [value, setValue] = useState('')
    const navigate = useNavigate()
    return (
        <div>
            <p>注册第一步</p>
            <Input
                placeholder='请输入手机号'
                value={value}
                onChange={val => {
                    setValue(val)
                }}
            />

            <Button color='danger' onClick={() => {
                // 快速注册
                docheckphone({ tel: value }).then(res => {
                    console.log('res', res);
                    if (res.data.code == '10005') {
                        // 说明已经被注册
                        Toast.show({
                            content: '该用户已经被注册',
                            duration: 1000,
                            afterClose: () => {
                                // console.log('after')
                                // 跳转到登录页
                                navigate('/login')
                            },
                        })
                    } else {

                        // 01:模态框弹窗确认发送手机短信
                        // 02: 点击确认下一步
                        Modal.confirm({
                            content: '确认要发送手机短信吗?',
                            onConfirm: async () => {
                                // 注册成功下一步
                                navigate('/regist/step2', {
                                    state: {
                                        tel: value
                                    }
                                })
                            },
                        })



                    }
                })

            }}>快速注册</Button>
        </div>
    )
}